import React, { Component } from 'react'
import { Search } from 'antd-mobile'
import { NavLink } from 'react-router-dom'
import { Carousel } from 'antd';
import { ActionBar } from 'react-vant';
import { PullRefresh } from 'react-vant';
// import { withRouter } from 'react-router';
// import { withRouter } from "react-router-dom";
import ddlogo from '../../images/ddlogo.jpg';
import shop1 from '../../images/shop1.jpg';
import shop2 from '../../images/shop2.jpg';
import shop3 from '../../images/shop3.jpg';
import shop4 from '../../images/shop4.jpg';
import shop5 from '../../images/shop5.jpg';
import shop6 from '../../images/shop6.jpg';
import shop7 from '../../images/shop7.jpg';
import shop8 from '../../images/shop8.jpg';
import shop9 from '../../images/shop9.jpg';
import shop10 from '../../images/shop10.jpg';
import shop12 from '../../images/shop12.jpg';
import { shoplist, shopcarlist } from "../../api/index"

const onRefresh = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, 1000);
  });
};
export default class Shop extends Component {




  // export class  Shop extends Component {



  // getlist = () => {
  //   shoplist().then(res => {
  //     this.setState({
  //       shoplist: res.data.data,
  //     })
  //   })
  // }


  async componentDidMount() {
    let res = await shopcarlist()
    this.getlist()
    this.setState({
      num: res.data.data.length
    })
  }


  // componentDidMount() {
  //   this.getlist();
  // }

  getlist = async () => {
    let res = await shoplist()
    this.setState({
      shoplist: res.data.data
    })
  }


  state = {
    shoplist: [],
    num: 0,
    shoplist2: [
      {
        img: shop1,
        name: '皮肤用药',
        path: '/app/home'
      },
      {
        img: shop2,
        name: '妇科用药',
        path: '/app/home'
      },
      {
        img: shop3,
        name: '肠胃消化',
        path: '/app/home'
      },
      {
        img: shop4,
        name: '呼吸用药',
        path: '/app/home'
      },
      {
        img: shop5,
        name: '营养补充',
        path: '/app/home'
      },
      {
        img: shop6,
        name: '家庭必备',
        path: '/app/home'
      },
      {
        img: shop7,
        name: '耳鼻咽喉',
        path: '/app/home'
      },
      {
        img: shop8,
        name: '男科用药',
        path: '/app/home'
      },
      {
        img: shop9,
        name: '骨科疼痛',
        path: '/app/home'
      },
      {
        img: shop10,
        name: '心脑血管',
        path: '/app/home'
      },
    ]
  }
  //购物车1
  shopcar = () => {
    this.props.history.push('/car')
  }
  //list详情页、
  shopDetail = (item) => {
    this.props.history.push({
      pathname: `/shopDetail/${item.id}`,
      state: { data: item },
    })
  }

  render() {

    const contentStyle = {
      height: '160px',
      color: '#fff',
      lineHeight: '160px',
      textAlign: 'center',
      background: '#364d79',
    };

    // const { shoplist } = this.state
    const { shoplist2 } = this.state

    return (
      <div className='shop'>
        <header>
          <h2>商城</h2>
        </header>
        <main>
          <PullRefresh onRefresh={onRefresh}>
            <h4>
              <Search placeholder='请输入内容' />
              <p>
                <img src={ddlogo} alt="" />
              </p>
            </h4>
            <h3><span>快速购药</span> <span>安全品质保证</span></h3>
            <div className="shoplist2">
              {
                shoplist2.length && shoplist2.map((item, idx) => {
                  return <NavLink key={idx} to={item.path}>
                    <p><img src={item.img} alt="" /></p>
                    <p>{item.name}</p>
                  </NavLink>
                })
              }
            </div>
            <div className="swiper">
              <Carousel autoplay>
                <div>
                  <h3 style={contentStyle}>
                    <img src="https://img1.baidu.com/it/u=3443896827,3952603472&fm=26&fmt=auto" alt="" />
                  </h3>
                </div>
                <div>
                  <h3 style={contentStyle}>
                    <img src="https://img2.baidu.com/it/u=4197162429,2419939361&fm=26&fmt=auto" alt="" />
                  </h3>
                </div>
                <div>
                  <h3 style={contentStyle}>
                    <img src="https://img1.baidu.com/it/u=2564830932,1986794290&fm=26&fmt=auto" alt="" />
                  </h3>
                </div>
                <div>
                  <h3 style={contentStyle}>
                    <img src="https://img2.baidu.com/it/u=2254188701,678351681&fm=26&fmt=auto" alt="" />
                  </h3>
                </div>
              </Carousel>
            </div>
            <h6 className='h3'><span>医看我</span> <span>名药好物推荐</span></h6>
            <h6>
              <img src={shop12} alt="" />
            </h6>
            <h3 className='h33'><span>美洽心选</span></h3>
            <div className="shoplist">
              {
                this.state.shoplist?.map((item, idx) => {
                  return <dl key={idx} onClick={() => this.shopDetail(item)}>
                    <dt>
                      <img src={item.img} alt='' />
                    </dt>
                    <dd>
                      <p>{item.title}</p>
                      <p>{item.price}￥</p>
                    </dd>
                  </dl>
                })
              }
              <ActionBar.Icon icon="cart-o" badge={{ content: this.state.num }} text="" onClick={() => { this.shopcar() }} />
            </div>
          </PullRefresh>
        </main>

      </div>
    )
  }
}
// "react-router-dom": "^5.3.0",

// export default withRouter(Shop)
